import React, { Component,createContext} from 'react';//引入上下文
let {
  Provider,//提供值
  Consumer,//获取值
}=createContext();
class Dome extends Component {
  render (){
    return(
      <div>
      <h1>我是Dome组件</h1>
      <DomeChilder></DomeChilder>
      </div>
    )
  }
}
class DomeChilder extends Component {
  render(){
    return(
      <Consumer>
        {
          ({msg,handerClick})=>{
          return (
            <div>
           <h2>收到值：{msg}</h2>
           <button onClick={(params) => {
             handerClick()
           }}>变🐖</button>
           </div>
          )
          }
        }
      </Consumer>
    )
  }
}
class App extends Component {
  state={
    msg:'🐂'
  }
  handerClick =((params) => {
    this.setState({
      msg:"🐖"
    })
  })
  render() {
    return (
      <div>
        <Provider
        value={{
          msg:this.state.msg,
          handerClick:this.handerClick,
        }}      
        >
        <Dome></Dome>
        </Provider>
      </div>
    );
  }
}

export default App;
